v-on 是 Vue.js 中用來監聽 DOM 事件的指令。

常見的DOM事件:

click: 當元素被點擊時觸發。
mouseover: 當滑鼠指針移入元素時觸發。
mouseout: 當滑鼠指針移出元素時觸發。
mousedown: 當滑鼠按下按鈕時觸發。
mouseup: 當滑鼠釋放按鈕時觸發。
keydown: 當鍵盤按下鍵時觸發。
keyup: 當鍵盤釋放鍵時觸發。
focus: 當元素獲得焦點時觸發。
blur: 當元素失去焦點時觸發。
change: 當表單元素的值發生變化時觸發（通常與 <input>, <select>, <textarea> 一起使用）。
submit: 當表單提交時觸發。
input: 當輸入框中的值發生變化時觸發（通常與 <input>, <select>, <textarea> 一起使用）。
這些是一些常見的 DOM 事件，可以根據需要在 Vue.js 中使用 v-on 指令來監聽這些事件。

v-on範例:
html:

<div id="app">
  <button v-on:click="handleClick">按鈕</button>
</div>

Js:

var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      alert('按鈕被點擊了！');
    }
  }
})

呈現畫面:

按下後:

在範例中，我們在 HTML 中使用了一個按鈕元素，並使用 v-on:click="handleClick" 將點擊事件和 Vue 實例中的 handleClick 方法綁定在一起。
我們使用 methods 屬性來定義了一個名為 handleClick 的方法，當按鈕被點擊時，這個方法會彈出一個警示框。
當按鈕被點擊時，handleClick 方法就會被觸發。

v-on簡寫:
v-on 也可以簡寫為 @，範例如下：

<div id="app">
  <button @click="handleClick">點擊我</button>
</div>